import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'index.dart';

/// 实名认证页面视图
/// 
/// 参考小程序实现：wanzhende-m/miniprogram/pages/verify/
/// 
/// 页面功能：
/// - 展示实名认证状态
/// - 未认证时显示表单
/// - 已认证时显示认证信息
class VerifyPage extends GetView<VerifyController> {
  const VerifyPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F5F5),
      appBar: AppBar(
        title: const Text('实名认证'),
        centerTitle: true,
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios, color: Colors.black),
          onPressed: controller.onBack,
        ),
      ),
      body: GetBuilder<VerifyController>(
        id: "verify",
        builder: (_) {
          return SingleChildScrollView(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 认证状态卡片
                _buildStatusCard(),
                
                const SizedBox(height: 20),
                
                // 表单区域（仅在未认证时显示）
                if (!controller.isRealNameVerified)
                  _buildFormSection(),
              ],
            ),
          );
        },
      ),
      // 提交按钮（未认证时显示）
      bottomNavigationBar: GetBuilder<VerifyController>(
        id: "verify",
        builder: (_) {
          if (controller.isRealNameVerified) {
            return _buildVerifiedButton();
          } else {
            return _buildSubmitButton();
          }
        },
      ),
    );
  }
  
  /// 认证状态卡片
  Widget _buildStatusCard() {
    final isVerified = controller.isRealNameVerified;
    
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(
          color: isVerified ? Colors.green : Colors.grey[300]!,
          width: 1,
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 10,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 状态行
          Row(
            children: [
              Icon(
                isVerified ? Icons.check_circle : Icons.info_outline,
                color: controller.verifyStatusColor,
                size: 24,
              ),
              const SizedBox(width: 8),
              const Text(
                '认证状态：',
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.grey,
                ),
              ),
              Text(
                controller.verifyStatusText,
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: controller.verifyStatusColor,
                ),
              ),
            ],
          ),
          
          // 已认证时显示详细信息
          if (isVerified) ...[
            const SizedBox(height: 16),
            _buildInfoRow('真实姓名：', controller.verifiedName),
            const SizedBox(height: 8),
            _buildInfoRow('身份证号：', controller.verifiedIdCard),
            const SizedBox(height: 8),
            _buildInfoRow('认证时间：', controller.verifiedTime),
          ],
        ],
      ),
    );
  }
  
  /// 信息行
  Widget _buildInfoRow(String label, String value) {
    return Row(
      children: [
        Text(
          label,
          style: const TextStyle(
            fontSize: 14,
            color: Colors.grey,
          ),
        ),
        Expanded(
          child: Text(
            value,
            style: const TextStyle(
              fontSize: 14,
              color: Colors.black87,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ],
    );
  }
  
  /// 表单区域
  Widget _buildFormSection() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        children: [
          // 证件类型
          _buildFormItem(
            label: '证件类型',
            child: const Text(
              '居民身份证',
              style: TextStyle(fontSize: 16, color: Colors.black87),
            ),
          ),
          
          const Divider(height: 1),
          
          // 真实姓名
          _buildFormItem(
            label: '真实姓名',
            child: TextField(
              controller: controller.realNameController,
              onChanged: controller.onNameChanged,
              decoration: const InputDecoration(
                hintText: '请输入真实姓名',
                border: InputBorder.none,
                hintStyle: TextStyle(color: Colors.grey),
              ),
              style: const TextStyle(fontSize: 16),
            ),
          ),
          
          const Divider(height: 1),
          
          // 证件号码
          _buildFormItem(
            label: '证件号码',
            child: TextField(
              controller: controller.idCardNoController,
              onChanged: controller.onIdCardChanged,
              maxLength: 18,
              decoration: const InputDecoration(
                hintText: '请输入身份证号码',
                border: InputBorder.none,
                counterText: '',
                hintStyle: TextStyle(color: Colors.grey),
              ),
              style: const TextStyle(fontSize: 16),
            ),
          ),
        ],
      ),
    );
  }
  
  /// 表单项
  Widget _buildFormItem({required String label, required Widget child}) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      child: Row(
        children: [
          SizedBox(
            width: 80,
            child: Text(
              label,
              style: const TextStyle(
                fontSize: 16,
                color: Colors.black87,
              ),
            ),
          ),
          Expanded(child: child),
        ],
      ),
    );
  }
  
  
  /// 提交按钮
  Widget _buildSubmitButton() {
    return SafeArea(
      child: Container(
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.05),
              blurRadius: 10,
              offset: const Offset(0, -2),
            ),
          ],
        ),
        child: Obx(() {
          return ElevatedButton(
            onPressed: controller.isSubmitting.value ? null : controller.submitVerify,
            style: ElevatedButton.styleFrom(
              backgroundColor: const Color(0xFFFFC107),
              foregroundColor: Colors.black87,
              minimumSize: const Size(double.infinity, 48),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(24),
              ),
              elevation: 0,
            ),
            child: controller.isSubmitting.value
                ? const SizedBox(
                    width: 20,
                    height: 20,
                    child: CircularProgressIndicator(
                      strokeWidth: 2,
                      valueColor: AlwaysStoppedAnimation<Color>(Colors.black54),
                    ),
                  )
                : const Text(
                    '提交认证',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
          );
        }),
      ),
    );
  }
  
  /// 已认证按钮
  Widget _buildVerifiedButton() {
    return SafeArea(
      child: Container(
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.05),
              blurRadius: 10,
              offset: const Offset(0, -2),
            ),
          ],
        ),
        child: ElevatedButton(
          onPressed: null,
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.green.withOpacity(0.15),
            foregroundColor: Colors.green,
            minimumSize: const Size(double.infinity, 48),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(24),
              side: const BorderSide(color: Colors.green, width: 1),
            ),
            elevation: 0,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Icon(Icons.check_circle, size: 20),
              SizedBox(width: 8),
              Text(
                '已完成认证',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
